<template>
  <div class="h-screen bg-gray-50">
    <the-navbar title="我的卖币" left-arrow @click-left="$router.back()" />

    <this-tabs v-model="activeTab" ref="tabs">
      <template #tab0 v-if="activeTab == 0">
        <pending-list ref="pending-list" />
      </template>
      <template #tab1 v-if="activeTab == 1">
        <pass-list ref="pass-list" />
      </template>
      <template #tab2 v-if="activeTab == 2">
        <done-list ref="done-list" />
      </template>
    </this-tabs>

    <this-dialog ref="dialog" @refresh="refresh0" />
    <the-footer :active="2" />
  </div>
</template>

<script>
import theFooter from '../../components/footer.vue'
import theNavbar from '../../components/navbar.vue'
import thisDialog from './dialog.vue'
import thisTabs from './tabs.vue'
import pendingList from './list-pending.vue'
import passList from './list-pass.vue'
import doneList from './list-done.vue'

export default {
  components: {
    theFooter,
    theNavbar,
    thisDialog,
    thisTabs,
    pendingList,
    passList,
    doneList,
  },
  data() {
    return {
      activeTab: 0,
    }
  },
  created() {
    const handler = data => {
      if (data.mid !== this.$store.state.user.id) {
        return
      }
      if (this.activeTab === 0) {
        this.refresh0()
      }
      if (this.activeTab === 1) {
        this.refresh1()
      }
    }
    this.$channel.bind('sell-change', handler)

    this.$once('hook:beforeDestroy', () => {
      this.$channel.unbind('buy-change', handler)
    })
  },
  methods: {
    // onCancel(row) {
    //   this.$refs.dialog.open(row, 'cancel')
    // },
    refresh0() {
      this.$refs['pending-list'].onRefresh()
      this.$refs.tabs.getStatis()
    },
    refresh1() {
      this.$refs['pass-list'].onRefresh()
      this.$refs.tabs.getStatis()
    },
  },
  filter: {},
}
</script>

<style>
</style>